<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>无缝切换轮播图</title>
    <link rel="stylesheet" href="./css/slide.css">
</head>
<body>

    <div class="slide">
        <!-- 导航点 -->
         <ul class="slide-nav">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
         </ul>
         <!-- /导航点 -->
         <!-- 轮播图 -->
         <div class="slide-content">
            <div class="slide-item">
                <img src="./img/1.jpg" alt="图片一">
            </div>
            <div class="slide-item">
                <img src="./img/2.jpg" alt="图片二">
            </div>
            <div class="slide-item">
                <img src="./img/3.jpg" alt="图片三">
            </div>
            <div class="slide-item">
                <img src="./img/4.jpg" alt="图片四">
            </div>
            <div class="slide-item">
                <img src="./img/5.jpg" alt="图片五">
            </div>
         </div>
         <!-- /轮播图 -->
         <!-- 按钮 -->
         <a href="javascript:void(0);" class="slide-btn prev"></a>
         <a href="javascript:void(0);" class="slide-btn next"></a>
         <!-- /按钮 -->
    </div>

    <script type="text/javascript" src="//cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
    <script type="text/javascript" src="./js/slide.js"></script>
    <script type="text/javascript">
        $(function(){
            $('.slide').slide();
        });
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
CSS

*{margin: 0;padding: 0;}
li{list-style-type: none;}
.slide{
    width: 640px;
    height: 400px;
    margin: 100px auto 0 auto;
    border: 5px solid #CCC;
    position: relative;
    overflow: hidden;
}
/* 导航点 */
.slide .slide-nav{
    position: absolute;
    z-index: 2;
    bottom: 10px;
    right: 10px;
}
.slide .slide-nav>li{
    width: 10px;
    height: 10px;
    border: 2px solid #CCC;
    border-radius: 50%;
    float: left;
    margin-left: 5px;
    cursor: pointer;
}
.slide .slide-nav>li.active{
    background-color: #FFF;
    border-color: #FFF;
}
/* #导航点 */
/* 轮播内容 */
.slide .slide-content{
    position: relative;
    z-index: 1;
    top: 0;
    width: 99999px;
    height: 400px;
}
.slide .slide-content .slide-item{
    float: left;
    width: 640px;
    height: 400px;
}
.slide .slide-content .slide-item>img{
    width: 100%;
    height: 100%;
}
/* #轮播内容 */
/* 按钮 */
.slide .slide-btn{
    display: block;
    width: 50px;
    height: 100px;
    position: absolute;
    z-index: 2;
}
.slide .prev{
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    background:url(../img/pre.png) no-repeat center center;
}
.slide .next{
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    background:url(../img/next.png) no-repeat center center;
}
.slide a:hover{
    background-color: rgba(0,0,0,0.5);
}
/* #按钮 */
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
JS

 $.fn.slide = function(){
    var slideEle = $(this);

    var slideContent = slideEle.find('.slide-content');
    var slideNavLi = slideEle.find('.slide-nav li');
    var slideWidth = slideEle.width(); //显示窗口宽度
    var timer = null;   //定时器
    var time = 2000;    //轮播图切换事件(毫秒)
    var index = 0;  //当前索引值
    var oldLength = slideEle.find('.slide-item').length;    //item初始长度
    var length = oldLength*2;   //item复制后的长度 

    init();

    //初始化
    function init(){
        //将item复制一份加入到原item的后面，形成:原1、原2、原3、原4、...原末、复1、复2、复3、复4...复末,并定位到复1项
        index = oldLength;
        slideContent.append(slideContent.html()).css({width:slideWidth*length,left:-slideWidth*index});

        //鼠标悬浮事件
        slideEle.hover(function(){  //移除定时任务
            clearInterval(timer);
        },function(){   //添加定时任务    
            setTimer();
        });

        //按钮点击事件
        slideEle.find('.prev').click(function(){
            if(!slideContent.is(':animated')){
                index--;
                change();
            }

        }).end()
        .find('.next').click(function(){
            if(!slideContent.is(':animated')){
                index++;
                change();
            }   
        });

        //导航点点击事件委托
        slideNavLi.click(function(event){
            index = $(event.target).index()+oldLength;
            change();
        });

        setTimer();
    }
    //设置定时器
    function setTimer(){
        timer = setInterval(function(){
            index++;
            change();
        },time);
    }

    function change(){
        changeSlide();
        changeNav();
    }

    //轮播图切换
    function changeSlide(){
/*      if(slideContent.is(':animated')){
            return;
        }*/
        slideContent.animate({left:-slideWidth*index},500,function(){
            //原1、原2、原3、原4、...原末、复1、复2、复3、复4...复末
            if(index <= 0){ 
                //当定位到原1时，在回调函数中将slideContent瞬间定位到复1
                index = oldLength;
                slideContent.css({left:-slideWidth*index});

            }
            if(index >=length-1){
                //当定位到复末时，在回调中将slideContent瞬间定位到原末
                index = oldLength-1;
                slideContent.css({left:-slideWidth*index}); 
            }
        });
    }
    //导航点切换
    function changeNav(){
        slideNavLi.removeClass('active').eq(index%oldLength).addClass('active');
    }

}
--------------------- 
作者：poorpenguin 
来源：CSDN 
原文：https://blog.csdn.net/weixin_39141044/article/details/80578888 
版权声明：本文为博主原创文章，转载请附上博文链接！